<template>
    <div class="headbox">
        <header>
            <!-- 页头 -->
            <div class="w-box">
                <!-- 租惠logo -->
                <div class="navlogo">
                    <img src="../assets/logo1.png" alt="" />
                </div>
                <div class="rightbox">
                    <div class="nav-list">
                        <input placeholder="请输入商品信息" icon="search" />
                    </div>
                </div>
                <div class="navside">
                    <!-- 用户 -->
                    <div class="user">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <router-link to="/login">
                                    <img
                                        src="../assets/img/log.png"
                                        alt=""
                                        v-show="getuser() == 1"
                                    />
                                    <img
                                        src="../assets/img/log2.png"
                                        alt=""
                                        v-show="getuser() == 0"
                                    />
                                </router-link>
                            </span>
                            <!-- 不登录不显示 -->
                            <el-dropdown-menu
                                slot="dropdown"
                                style="width: 120px; height:200px;margin-top: 5px; text-align:center "
                                v-if="getuser()"
                            >
                                <el-dropdown-item style="height:50px;">
                                    <router-link to="/personal"
                                        >个人中心</router-link
                                    >
                                </el-dropdown-item>
                                <el-dropdown-item style="height:50px;"
                                    >办理会员</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <span> <img src="../assets/sp.png" alt=""/></span>
                    <!-- 购物车 -->
                    <div class="cart">
                        <img src="../assets/cart.png" alt="" />
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>
<script>
import login from "../components/login.vue";

export default {
    name: "myhead",
    data() {
        return {
            user: "",
        };
    },
    computed: {},
    methods: {
        // 判断登录用户
        getuser() {
            localStorage.setItem("user", "1");
            if (localStorage.getItem("user") != null) {
                return 1;
            }
        },

        // test() {
        //   this.$axios({
        //     methods: "get",
        //     url: "http://localhost:8080/test",
        //     data: "123456",
        //   })
        //     .then((res) => {
        //         console.log(res)
        //     })
        //     .catch((err) => {
        //       console.log("传输失败");
        //     });
        // },
    },
    components: {
        login,
    },
};
</script>
<style lang="scss" scoped>
@import "../assets/style/theme";
@import "../assets/style/mixin";
.headbox {
    background: $head-bgc;
    background-image: -webkit-linear-gradient(#000, #121212);
    background-image: linear-gradient(#000, #121212);
    width: 100%;
    left: 0;
    top: 0;
}
header {
    height: 100px;
    z-index: 30;
    position: relative;
}
.w-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .navlogo {
        width: 50px;
        height: 50px;

        margin-left: 50px;
        img {
            width: 50px;
            height: 50px;
            margin-right: 20px;
        }
    }
    .nav-list {
        display: flex;
        justify-content: center;
        align-items: center;

        input {
            width: 305px;
            background-color: white;
            border-radius: 8px;
            height: 40px;
        }
        a {
            width: 110px;
            color: #c8c8c8;
            display: block;
            font-size: 14px;
            padding: 0 25px;
            &:hover {
                color: #fff;
            }
        }
        .rightbox {
            display: flex;
        }
    }
}
.navside {
    display: flex;
    align-items: center;
    padding-right: 50px;
    img {
        width: 40px;
        height: 40px;
        margin-top: 14px;
        margin-right: 20px;
    }
}
</style>
